<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all" />
    <link rel="stylesheet" href="../css/public.css" media="all" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.timepicker.min.css" />
    <link rel="stylesheet" href="../css/jquery.json-viewer.css" media="all">
    <title>Document</title>
</head>

<body>
    <div class="layuimini-container">
        <div class="layuimini-main">
            <div id="searchBox">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">数据库</label>
                            <div class="layui-input-inline">
                                <select name="database_info" lay-filter="system-select" id="database_info">
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">过程名字</label>
                            <div class="layui-input-inline" style="width: 300px">
                                <input type="text" class="layui-input" autocomplete="off" id="proc_name"
                                    name="proc_name" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn"><i class="layui-icon"></i>获取</button>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline short-input-inline">
                                <input type="checkbox" name="is_rawType" id="is_rawType" title="XML使用原始类型" />
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md6" style="overflow-y:auto;">
                <textarea class="layui-textarea" id="xml-input" rows="25"></textarea>
            </div>
            <div class="layui-col-md6" style="overflow-y:auto;padding-left:20px;">
                <textarea class="layui-textarea" id="java-input" rows="25"></textarea>
            </div>
        </div>
    </div>
</body>
<style>
    #searchBox .layui-inline {
        margin: 0 0px 10px 0;
    }

    .layui-form-item {
        margin: 0 !important;
    }

    #colorExam {
        padding: 0 10px 0;
    }

    .spanItem {
        line-height: 20px;
        margin-right: 20px;
        display: inline-block;
    }

    .spanItem span {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: relative;
        top: 2px;
    }

    .spanItem .redItem {
        background: #4f7ecb;
    }

    .spanItem .blueItem {
        background: #e34d4d;
    }

    .layui-form-pane .layui-input-inline {
        width: 120px;
    }

    .layui-form-pane .layui-input-inline.short-input-inline {
        width: 100px;
    }

    .log_box {
        margin: 20px 0;
    }

    .ctrl-box {
        height: 40px;
        padding: 10px
    }

    #json-input {
        width: 100%;
    }

    #json-renderer {
        padding: 25px;
        border: 1px solid #ddd;
        overflow-y: auto
    }

    #copy-dom {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: -10;
    }

    #copy-btn {
        float: right;
    }

    .checkbox-inline {
        margin: 0 5px;
    }
</style>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
<script src="../js/base.js" charset="utf-8"></script>
<script src="../js/jquery.json-viewer.js" charset="utf-8"></script>
<script id="addOption" type="text/html">
    <!--layui模板引擎，动态添加后台数据-->
    {{# layui.each(d, function(index, item){ }}
<option value='{{  index  }}'>{{ item.name }}</option>
{{# }); }}
</script>
<script>
    layui.config({
        base: '../js/lay-module/'
    }).extend({
        // dtree: 'dtree/dtree', //dtree组件
        myModule: 'moduleMy/myModule' //ajax拦截器
    }).use(['myModule', 'form', "laytpl"], function () {
        var form = layui.form,
            laytpl = layui.laytpl,
            myModule = layui.myModule;
        $.ajax({
            url: `/api/database.json`,
            type: "GET",
            Headers: [
                { key: "lastModDate", value: "Fri, 13 Feb 2013 13:43:19 GMT" }
            ],
            // dataType: "json",
            success: function (res) {
                initSelectData(res)
            },
            error: function (res) {
                if (res && res[0]) {
                    initSelectData(res)
                }
            }
        });
        var selectData;
        var currentSelect;
        function initSelectData(data) {
            selectData = data;
            var getTpl = $("#addOption").get(0).innerHTML;
            var view = $("#database_info").get(0);
            var html = laytpl(getTpl).render(data, function (html) {
                view.innerHTML = html;
            });
            currentSelect = selectData[0]
            form.render('select');
        }
        var view = $("#database_info").get(0);
        //下拉框操作
        form.on('select(system-select)', function (data) {
            currentSelect = selectData[data.value]
        });

        form.on("submit(data-search-btn)", function (data) {
            let { proc_name, is_rawType } = data.field;
            is_rawType = is_rawType == "on"
            if (!proc_name || proc_name == "") {
                layer.msg("无效过程名", { icon: 2, time: 1100 });
            }
            $.ajax({
                url: `/get_proc_param`,
                type: "POST",
                contentType: 'application/json',
                data: JSON.stringify({
                    obj_name: proc_name,
                    url: currentSelect.url,
                    pwd: currentSelect.pwd,
                    user: currentSelect.username
                }),
                timeout: 120000, //超时时间设置，单位毫秒
                success: function (res) {
                    console.log("res:", res)
                    if (res && res[0]) {
                        const xml = formatXml(proc_name, is_rawType, res)
                        const java = formatJava(proc_name, is_rawType, res)
                        $("#xml-input").val(xml)
                        $("#java-input").val(java)
                    }
                    // initSelectData(res)
                },
                error: function (res) {
                    console.log("res:", res)
                    // if (res && res[0]) {
                    //     initSelectData(res)
                    // }
                }
            });

            return false;
        });
    })


    function formatXml(proc_name, is_rawType, data) {
        let top = `\t<update id="CALL_${proc_name.toUpperCase()}" parameterType="map" statementType="CALLABLE">`
        let body = `\t\tcall ${proc_name}(\n`
        for (let i = 0; i < data.length; i++) {
            body += `\t\t\t#{${data[i].name},\tmode=${data[i].object_type.replace("/", "")},\tjdbcType=${is_rawType ? data[i].type_name : "VARCHAR"}}`
            if (i != data.length - 1) {
                body += ",\n"
            }
        }
        body += "\n\t\t)"
        let bottom = `\t</update>`
        return `${top}\n${body}\n${bottom}`;
    }

    function formatJava(proc_name, is_rawType, data) {
        let top = `Map<String, Object> callParam = new HashMap<>();\n`
        let body = ""
        for (let i = 0; i < data.length; i++) {
            body += `callParam.put("${data[i].name}", null); // #${data[i].pos} TYPE: ${data[i].object_type} | DATATYPE: ${data[i].type_name}\n`
        }
        let bottom = `\njdbcGateway.call("CALL_${proc_name.toUpperCase()}", callParam);`
        return `${top}\n${body}\n${bottom}`;
    }
</script>

</html>